﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物车</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/preloader.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/backToTop.css">
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
    <link rel="stylesheet" href="assets/css/ui-range-slider.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        .my-font-weight{
            font-weight: 700;
        }
        .my-center{
            margin: 0 auto;
        }
        .my-float-left{
            float: left;
        }
        .my-margin-left-35{
            margin-left: 35%;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->

<!-- preloader area start -->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div id="object"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->

<!-- back to top start -->
<div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
    </svg>
</div>
<!-- back to top end -->

<!-- header area start -->
<header>
    <div class="header__area">
        <div class="header__top header__padding d-none d-sm-block">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-6 col-md-5 d-none d-md-block">
                        <div class="header__welcome">
                            <span>欢迎来到校园二手书籍交易平台界面</span>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-7">
                        <div class="header__action d-flex justify-content-center justify-content-md-end">
                            <ul>
                                <li class="d-none d-xl-inline-block">
                                    <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                    <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                </li>
                                <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<main>

    <!-- breadcrumb area start -->
    <section class="breadcrumb__area box-plr-75">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xxl-12">
                    <div class="breadcrumb__wrapper">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item my-font-weight"><a href="index.html">首页</a></li>
                                <li class="breadcrumb-item active my-font-weight" aria-current="page">购物车</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- Cart Area Strat-->
    <section class="cart-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="#">
                        <div class="table-content table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="product-check">
                                            <input class="my-checked-head" th:onclick="checkAll()" type="checkbox" th:checked="true" />
                                            全选
                                        </th>
                                        <th class="product-thumbnail">图片</th>
                                        <th class="cart-product-name">书籍</th>
                                        <th class="product-category">类别</th>
                                        <th class="product-price">单价</th>
                                        <th class="product-quantity">数量</th>
                                        <th class="product-subtotal">总价</th>
                                        <th class="product-remove">移除</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="cartItem:${cart.items}" class="my-tbody-tr">
                                        <td class="product-check">
                                            <input class="my-checked-body" th:attr="bookId=${cartItem.id}" type="checkbox" th:checked="${cartItem.check}"/>
                                        </td>
                                        <td class="product-thumbnail">
                                            <a th:href="'http://huyulu666.top/item.html?bookId=' + ${cartItem.id}">
                                                <img th:src="${cartItem.image}" alt="">
                                            </a>
                                        </td>
                                        <td class="product-name">
                                            <a th:href="'http://huyulu666.top/item.html?bookId=' + ${cartItem.id}" th:text="${cartItem.name}"></a>
                                        </td>
                                        <td class="product-category">
                                            <span th:text="${cartItem.categoryName}"></span>
                                        </td>
                                        <td class="product-price">
                                            <span class="amount my-price-body" th:attr="bookPrice=${cartItem.price}" th:text="'￥'+${cartItem.price}"></span>
                                        </td>
                                        <td class="product-quantity">
                                            <div class="cart-plus-minus">
                                                <input type="text" class="my-count-body"
                                                       th:attr="bookCount=${cartItem.count}, bookId=${cartItem.id}"
                                                       th:value="${cartItem.count}"
                                                />
                                            </div>
                                        </td>
                                        <td class="product-subtotal">
                                            <span class="amount my-totalPrice-body" th:text="'￥'+${cartItem.getTotalPrice()}"></span>
                                        </td>
                                        <td class="product-remove">
                                            <a class="deleteItemBtn" href="javascript:;" th:attr="bookId=${cartItem.id}"><i class="fa fa-times"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row my-float-left">
                            <div class="col-12">
                                <div class="coupon-all">
                                    <div class="coupon">
                                        <input id="coupon_code" class="input-text" name="coupon_code" value="" placeholder="请输入您的优惠券编号" type="text">
                                        <button class="t-y-btn t-y-btn-border" name="apply_coupon" type="submit">
                                            使用优惠券
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5 ml-auto my-center">
                                <div class="cart-page-total">
                                    <h2 style="text-align: center">购物车总计</h2>
                                    <ul class="mb-20 my-total-ul">
                                        <li>数量 <span class="my-total-count" th:text="${cart.getCountNum()}+' 本'"></span></li>
                                        <li>总价 <span class="my-total-price" th:text="'￥'+${cart.getTotalAmount()}"></span></li>
                                        <li>优惠 <span class="my-total-reduce" th:text="'-'+${cart.reduce}"></span></li>
                                        <li>小计 <span class="my-total-final" th:text="'￥'+${cart.getTotalAmount()-cart.reduce}"></span></li>
                                    </ul>
                                    <a class="t-y-btn my-font-weight my-margin-left-35" href="/pay.html">结 算</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Cart Area End-->

</main>

<!-- JS here -->
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/jquery-ui-slider-range.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
    $(function () {
        // 初始化购物车总计
        totalData();
        // 初始是否全选
        let checkList = $(".my-checked-body");
        for (let i = 0; i < checkList.length; i ++){
            let check = checkList.eq(i).prop("checked");
            if (!check) {
                $(".my-checked-head").prop("checked", false);
                return;
            }
        }
    })
    // 全选按钮点击事件
    function checkAll() {
        let prop = $(".my-checked-head").prop("checked");
        console.log(prop)
        let checkList = $(".my-checked-body");
        for (let i = 0; i < checkList.length; i ++){
            checkList.eq(i).prop("checked", prop);
        }
    }
    // 是否勾选全选按钮
    function isCheckAll() {
        let checkList = $(".my-checked-body");
        for (let i = 0; i < checkList.length; i ++){
            let check = checkList.eq(i).prop("checked");
            if (!check) {
                $(".my-checked-head").prop("checked", false);
                return;
            }
        }
        $(".my-checked-head").prop("checked", true);
    }
    // 更改总数据
    function totalData(){
        let count = 0, price = 0;
        let tr = $(".my-tbody-tr");
        for (let i = 0; i < tr.length; i ++){
            let bookPrice = $(".my-price-body").eq(i).attr("bookPrice");
            let bookCount = $(".my-count-body").eq(i).attr("bookCount");
            // console.log(bookPrice + "-" + bookCount + "=" + (bookPrice*bookCount))
            $(".my-totalPrice-body").eq(i).text("￥" + (bookPrice*bookCount));
            // 是否选中
            let check = $(".my-checked-body").eq(i).prop("checked");
            // console.log(check)
            if (check){
                price = price + bookPrice * bookCount;
                count = count + bookCount * 1;
            }
        }
        console.log(price)
        console.log(count)
        $(".my-total-count").text(count + " 本");
        $(".my-total-price").text("￥" + price);
        $(".my-total-reduce").text("- 0");
        $(".my-total-final").text("￥" + price);
    }
    // 按钮点击事件
    $(".my-checked-body").click(function () {
        let id = $(this).attr("bookId");
        let check = $(this).prop("checked");
        console.log(id)
        console.log(check)
        $.ajax({
            type: "get",
            // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
            url: "http://huyulu666.top/checkedItem?bookId=" + id + "&check=" + (check?1:0),
            dataType: "json",

            success: function(response) {
                // console.log(response);
                isCheckAll();
                totalData();
            },
            error: function(data) {}
        });
    })
    // 书籍数量改变事件
    $(".my-count-body").change(function () {
        let id = $(this).attr("bookId");
        let count = $(this).val();
        if (count <= 0) count = 1;
        $(this).attr("bookCount", count)
        console.log(count)
        changeCount(id, count);
    })
    //  + - 按钮改变书籍数量的事件
    $(".qtybutton").click(function () {
        let id = $(this).siblings().eq(0).attr("bookId");
        let count = $(this).siblings().eq(0).val();
        if(count <= 0) count = 1;
        $(this).siblings().eq(0).attr("bookCount", count);
        // console.log(id)
        // console.log(count)
        changeCount(id, count);
    })
    // 向改变书籍数量接口发送ajax请求
    function changeCount(id, count) {
        $.ajax({
            type: "get",
            // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
            url: "http://huyulu666.top/countItem?bookId=" + id + "&count=" + count,
            dataType: "json",

            success: function(response) {
                // console.log(response);
                totalData();
            },
            error: function(data) {}
        });
    }
    // 删除购物项
    $(".deleteItemBtn").click(function () {
        let id = $(this).attr("bookId");
        let parent = $(this).parent().parent();
        console.log(parent)
        $.ajax({
            type: "get",
            // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
            url: "http://huyulu666.top/deleteItem?bookId=" + id,
            dataType: "json",

            success: function(response) {
                console.log(response);
                parent.remove();
                totalData();
            },
            error: function(data) {}
        });
    })
</script>
</body>
</html>
